<template>
  <div class="qywx-dept-user-selector">
    <div class="selector-left">
      <div class="dept-tree">
        <el-tree :data="deptTree" :props="{label:'label',children:'children'}" @node-click="handleNodeClick" :expand-on-click-node="false" default-expand-all></el-tree>
      </div>
      <div class="dept-user">
        <div class="dept-user-list" v-loading="userListloading">
          <el-checkbox v-model="item.checked" v-for="item in userList" :key="item.userId" :label="item.userName+'('+item.userId+')'" @change="setSelected(item,$event)"></el-checkbox>
        </div>
      </div>
    </div>
    <div class="selector-right">
      <div class="selected-dept-user">
        <p class="selected-item" v-for="item in selectedList">{{item.userName + "(" + item.userId + ")"}}<el-button type="text" icon="el-icon-close" circle @click="delSelected(item)"></el-button></p>
      </div>
    </div>
  </div>
</template>

<script>
  import { listUser } from "@/api/system/user";
  import { treeselect } from "@/api/system/dept";
  export default {
    name: "qywx-dept-user-selector",
    props:['selectedList'],
    data(){
      return {
        deptTree:[],
        userList:[],
        userListloading:false
      }
    },
    methods:{
      getDeptTree() {
        let that = this
        treeselect().then(function (res) {
          if(res.code == 200){
            that.deptTree = res.data
          }
        })
      },
      handleNodeClick(node){
        let that = this
        that.userListloading = true
        listUser({deptId:node.id}).then(function(res){
          if(res.code == 200){
            for(let j of res.rows){
              j.userCode = j.userId
              j.userId = j.userName
              j.userName = j.nickName
            }
            for(let i of that.selectedList){
              let findObj = res.rows.find(obj => obj.userId == i.userId)
              if(findObj){
                findObj.checked = true
              }
            }
            that.userList = res.rows
          }
          that.userListloading = false
        })
      },
      clearUserList(){
        this.userList = []
      },
      setSelected(item, val){
        this.$emit('onSelectUser', item, val)
        if(!val){
          let qywxDeptUserObj = this.userList.find(obj => obj.userId == item.userId)
          if(qywxDeptUserObj){
            qywxDeptUserObj.checked = false
          }
        }
      },
      delSelected(item){
        let qywxDeptUserObj = this.userList.find(obj => obj.userId == item.userId)
        if(qywxDeptUserObj){
          qywxDeptUserObj.checked = false
        }
        this.$emit('onDelUser', item)
      }
    },
    created() {
      this.getDeptTree()
    }
  }
</script>

<style scoped>
  .qywx-dept-user-selector{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .selector-left{
    flex: 0.49;
  }
  .selector-right{
    flex: 0.49;
  }
  .dept-tree{
    width: 100%;
    border: 1px solid rgb(230, 235, 245);
    border-radius: 4px;
    height: 200px;
    margin-bottom: 20px;
  }
  .dept-tree .el-tree{
    border-radius: 4px;
    height: 100%;
    overflow: auto;
  }
  .dept-user{
    width: 100%;
    border: 1px solid rgb(230, 235, 245);
    border-radius: 4px;
    padding: 10px;
    height: 300px;
    overflow: auto;
  }
  .dept-user .el-checkbox{
    display: block;
    margin-bottom: 10px;
  }
  .selected-dept-user{
    width: 100%;
    border: 1px solid rgb(230, 235, 245);
    border-radius: 4px;
    padding: 10px;
    height: 520px;
    overflow: auto;
  }
  .selected-dept-user .selected-item{
    background-color: rgb(230, 235, 245);
    padding: 5px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
